<label class="p-1 text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{'FORMLY.CHART.ChartType' | translate: {Default: 'Chart Type'} }}</label>
<div class="ngm-formly-chart-type__container flex flex-col p-1 rounded-lg ring-offset-1 ring-offset-transparent ring-2 ring-transparent">
  <div class="flex items-center w-full max-w-full text-xs">
    <div class="pac-formly-chart-type__prefix">
      <ng-content class="ngm-prefix"></ng-content>
    </div>
  
    <mat-select class="flex-1" [formControl]="chartTypeControl" panelClass="ngm-formly-chart-type__panel ngm-select-panel ngm-density__cosy">
      <mat-select-trigger *ngIf="type" class="flex items-center">
        <mat-icon *ngIf="type" class="mr-1" displayDensity="compact" [svgIcon]="getChartType(type)?.icon"></mat-icon>
        <div class="flex-1">
          <span>{{ 'FORMLY.CHART.' + typeLabel | translate: {Default: typeLabel} }}</span>
          <span *ngIf="name.value" class="">:{{name.value}}</span>
        </div>

        <button *ngIf="type!==ChartTypeEnum.Custom" matSuffix mat-icon-button displayDensity="compact"
          (click)="$event.stopPropagation();$event.preventDefault();showMore.set(!showMore())">
          <mat-icon *ngIf="!showMore()">expand_more</mat-icon>
          <mat-icon *ngIf="showMore()">expand_less</mat-icon>
        </button>
  
        <button *ngIf="type===ChartTypeEnum.Custom" matSuffix mat-icon-button displayDensity="compact"
          (click)="$event.stopPropagation();$event.preventDefault();showCustomCode.set(!showCustomCode())">
          <mat-icon fontSet="material-icons-outlined"
            [color]="showCustomCode()?'accent':''"
          >code</mat-icon>
        </button>

      </mat-select-trigger>
      
      <mat-option>-- {{'FORMLY.CHART.None' | translate: {Default: 'None'} }} --</mat-option>
      <mat-optgroup *ngFor="let group of chartTypeGroups" [label]=" 'FORMLY.CHART.' + group.name | translate: {Default: group.name} "
                    [disabled]="group.disabled">
        <mat-option *ngFor="let chart of group.charts" [value]="chart.value" class="text-slate-500">
          <mat-icon [svgIcon]="chart.icon" ></mat-icon>
          {{ 'FORMLY.CHART.' + chart.label | translate: {Default: chart.label} }}
        </mat-option>
      </mat-optgroup>
    </mat-select>

    <button matSuffix *ngIf="removable" class="ngm-formly__remove" displayDensity="compact"
      mat-icon-button color="warn"
      (click)="$event.stopPropagation();$event.preventDefault();killMyself()">
      <mat-icon>clear</mat-icon>
    </button>
  </div>

  <div *ngIf="showMore()" class="min-h-12 w-full flex flex-col justify-start items-stretch gap-1 mt-2" displayDensity="compact">

    <div class="surface-content flex flex-col justify-start items-start gap-2 rounded-lg p-2" >
      <div class="flex items-center text-sm">
        <mat-icon fontSet="material-icons-outlined" displayDensity="compact" >edit_attributes</mat-icon>
        <span>{{ 'FORMLY.CHART.ChartType' | translate: {Default: 'Chart Type'} }}</span>
      </div>

      <ngm-input class="w-full" [label]="'FORMLY.CHART.ChartName' | translate: {Default: 'Chart Name'}"
        [formControl]="name"
      ></ngm-input>
      
      @if (HAS_ORIENTS[type]) {
        <div class="flex flex-col justify-start items-start">
          <label class="ngm-input-label">{{ 'FORMLY.CHART.Orient' | translate: {Default: 'Orient'} }}</label>

          <mat-button-toggle-group [(ngModel)]="orient" ngmAppearance="hero" color="accent" class="self-start">
            @for (orient of ORIENTS; track orient.value) {
              <mat-button-toggle [value]="orient.value">
                {{'FORMLY.CHART.'+orient.label | translate: {Default: orient.label} }}
              </mat-button-toggle>
            }
          </mat-button-toggle-group>
        </div>
      }

      @if (VARIANTS[type]) {
        <div class="flex flex-col justify-start items-start">
          <label class="ngm-input-label">{{ 'FORMLY.CHART.Variant' | translate: {Default: 'Variant'} }}</label>

          <mat-button-toggle-group [(ngModel)]="variant" ngmAppearance="hero" color="accent" class="self-start">
            @for (option of VARIANTS[type]; track option.value) {
              <mat-button-toggle [value]="option.value">
                {{ 'FORMLY.CHART.'+option.label | translate: {Default: option.label} }}
              </mat-button-toggle>
            }
          </mat-button-toggle-group>
        </div>
      }
    </div>

    <form *ngIf="type===ChartTypeEnum.GeoMap" class="surface-content flex flex-col justify-start items-start gap-2 rounded-lg p-2"
      [formGroup]="mapFormGroup" >
      <div class="flex items-center text-sm">
        <mat-icon fontSet="material-icons-outlined" displayDensity="compact" class="text-slate-900">map</mat-icon>
        <span>{{ 'FORMLY.CHART.GeoMapConfig' | translate: {Default: 'GeoMap Config'} }}</span>
      </div>

      <ngm-input class="self-stretch" [label]="'FORMLY.CHART.MapName' | translate: {Default: 'Map Name'}" formControlName="map"></ngm-input>
      
      <ngm-input class="self-stretch" [label]="'FORMLY.CHART.MapUrl' | translate: {Default: 'Map Url'}" formControlName="mapUrl"></ngm-input>
      
      <mat-checkbox formControlName="isTopoJSON">
        {{ 'FORMLY.CHART.IsTopoJSON' | translate: {Default: 'Is TopoJSON'} }}
      </mat-checkbox>
      
      <ngm-input *ngIf="mapFormGroup.value.isTopoJSON" class="self-stretch"
        [label]="'FORMLY.CHART.FeatureObjectNames' | translate: {Default: 'Feature Object Names'}"
        formControlName="features"></ngm-input>

      <ngm-select [label]="'FORMLY.CHART.MapProjection' | translate: {Default: 'Map Projection'}"
        formControlName="projection"
        valueKey="key"
        [selectOptions]="GeoProjections"
        >
      </ngm-select>

      <div ngmButtonGroup class="self-end">
        <button mat-flat-button [disabled]="mapFormGroup.pristine" (click)="confirmMap()">
          {{ 'FORMLY.COMMON.Reset' | translate: {Default: 'Reset'} }}
        </button>
        <button mat-raised-button color="primary" [disabled]="mapFormGroup.invalid || mapFormGroup.pristine" (click)="confirmMap(true)">
          {{ 'FORMLY.COMMON.Apply' | translate: {Default: 'Apply'} }}
        </button>
      </div>
    </form>

    <div class="surface-content w-full rounded-lg">
      <div class="flex items-center text-sm p-2">
        <mat-icon fontSet="material-icons-outlined" displayDensity="compact" class="text-slate-900">analytics</mat-icon>
        <span>{{ 'FORMLY.CHART.ChartOptions' | translate: {Default: 'Chart Options'} }}</span>
      </div>

      <ngm-schema-form class="w-full" [(ngModel)]="chartOptions" name="chartOptions" />
    </div>
    
  </div>

  @if (showCustomCode()) {
  <div class="surface-content flex flex-col justify-start items-stretch relative mt-2 rounded-lg overflow-hidden"
    ngmResizer [resizerHeight]="500">
    <header class="flex justify-between items-center px-2">
      <ngm-input [formControl]="name" [label]="'FORMLY.CHART.ChartName' | translate: {Default: 'Chart name'} " displayDensity="compact" placeholder="{{ 'FORMLY.CHART.CustomCode' | translate: {Default: 'Custom Code'} }}" />
    
      <div class="flex items-center gap-2">
        <button mat-icon-button displayDensity="compact" class="ngm-copilot-command-button"
          [disabled]="!scripts || answering"
          [matTooltip]=" 'FORMLY.CHART.AutomaticallyGenerateCode' | translate: {Default: 'Automatically generate code by comments'} "
          (click)="aiGenerate()">
          <mat-icon fontSet="material-icons-outlined">auto_awesome</mat-icon>
        </button>
      </div>
    </header>
    
    <ngx-monaco-editor class="flex-1 w-full"
        [options]="editorOptions()"
        [(ngModel)]="scripts"
        (onInit)="editor$.next($event)"
    ></ngx-monaco-editor>
    
    <div ngmResizerBar resizerBarPosition="bottom" style="z-index: 1;"
      cdkDrag
      cdkDragLockAxis="y"
    ></div>
  </div>
  }
</div>